<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="couponData"
      tooltip-effect="dark"
      style="width: 100%;margin-top:20px"
      @selection-change="handleSelectionChange"
      :header-cell-style="{
        background: '#f6f8fa',
        'font-weight': 'normal',
        color: 'black',
      }"
      :row-style="{ height: '50px' }"
    >
      <template slot="empty">
        <div class="emptyLine">
          暂无数据~
        </div>
      </template>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="名称" width="150">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="类型" width="150">
        <template slot-scope="scope">{{
          couponTypeList[scope.row.couponType]
        }}</template>
      </el-table-column>
      <el-table-column label="规则" width="200">
        <template slot-scope="scope">
          <div v-if="scope.row.couponType === 0">
            {{ scope.row.discount }}折,无门槛使用
          </div>
          <div v-if="scope.row.couponType === 1">
            {{ scope.row.discountAmount }}元,无门槛使用
          </div>
          <div v-if="scope.row.couponType === 2">
            {{ scope.row.discount }}折,满{{ scope.row.conditionAmount }}元使用
          </div>
          <div v-if="scope.row.couponType === 3">
            {{ scope.row.discountAmount }}元,满{{
              scope.row.conditionAmount
            }}元使用
          </div>
        </template>
      </el-table-column>
      <el-table-column label="已领取/剩余" width="140">
        <template slot-scope="scope"
          >{{ scope.row.hasGet }} /
          {{ scope.row.issueQuantity - scope.row.hasGet }}</template
        >
      </el-table-column>
      <el-table-column label="已使用">
        <template slot-scope="scope">{{ scope.row.hasUse }}</template>
      </el-table-column>
      <el-table-column label="状态" show-overflow-tooltip>
        <template slot-scope="scope">
          <span :style="{ color: couponStatusColorList[scope.row.status] }">{{
            couponStatusList[scope.row.status]
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div class="dealWay">
            <span
              style="color:#2D8CF0"
              @click="editCoupon(scope.row)"
              v-if="scope.row.status !== 2"
              >编辑</span
            >
            <span style="color:#2D8CF0" @click="showCoupon(scope.row)" v-else
              >查看</span
            >
            <span
              style="color:#FA4E74"
              @click="offCoupon(scope.row)"
              v-if="scope.row.status === 1"
              >关闭</span
            >
            <span style="color:#FA4E74" @click="delCoupon(scope.row)" v-else
              >删除</span
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="endVisible" width="40%">
      <EndContent :chooseItem="chooseItem"></EndContent>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import {
  couponList,
  delCoupons,
  offCoupons,
  couponDetail,
} from "@/api/couponActivity/coupon";
import EndContent from "../common/EndContent.vue";

@Component({
  components: {
    EndContent,
  },
})
export default class CouponList extends Vue {
  /** 优惠券数组 */
  couponData = [];

  /** 优惠券类型 */
  couponTypeList = ["无门槛折扣券", "无门槛现金券", "折扣券", "满减券"];

  /** 优惠券状态 */
  couponStatusList = ["未开始", "进行中", "已结束"];

  /** 状态颜色显示 */
  couponStatusColorList = ["#333333", "#333333", "#d5d5d5"];

  /** 选择优惠券 */
  selectList = [];

  /** 搜索条件 */
  search = {
    current: 1,
    size: 10,
    couponType: "", // 优惠券类型
    startTime: "", // 开始时间
    endTime: "", // 结束时间
    status: "", // 优惠券状态
    giveType: 0,
  };

  /** 查看结束活动弹窗 */
  endVisible = false;

  /** 选中优惠券 */
  chooseItem = {};

  mounted() {
    this.getCouponList();
  }

  getCouponList() {
    couponList(this.search).then(res => {
      this.couponData = res.data.list;
      this.$emit("subTotal", res.data.total);
    });
  }

  /**
   * 选择优惠券
   */
  handleSelectionChange(val) {
    this.selectList = [];
    val.forEach(item => {
      this.selectList.push(item.id);
    });
    this.$emit("getSelect", this.selectList);
  }

  /**
   * 删除优惠券
   */
  delCoupon(item) {
    this.$confirm("确认删除选中优惠券吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      let ids = [];
      if (item.id) {
        ids.push(item.id);
      } else {
        ids = item;
      }
      delCoupons(ids, {})
        .then(res => {
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.getCouponList();
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error(err);
          this.getCouponList();
        });
    });
  }

  /**
   * 查看关闭优惠券
   */
  showCoupon(item) {
    this.endVisible = true;
    couponDetail(item.id, {}).then(res => {
      const discountProductVos = res.data.discountProductVos;
      this.chooseItem = { ...res.data.couponVo, discountProductVos };
    });
  }

  /**
   * 关闭优惠券
   */
  offCoupon(item) {
    this.$confirm("确认关闭选中优惠券吗？关闭后无法恢复", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      let ids = [];
      if (item.id) {
        ids.push(item.id);
      } else {
        ids = item;
      }
      offCoupons(2, ids).then(res => {
        if (res.code === 200) {
          this.$message.success("关闭成功");
          this.getCouponList();
        }
      });
    });
  }

  /**
   * 编辑优惠券
   */
  editCoupon(item) {
    console.log("editItem", item);
    this.$router.push({ name: "addCouponActivity", params: { id: item.id } });
  }
}
</script>

<style lang="scss" scoped>
.dealWay {
  display: flex;
  cursor: pointer;
  width: 60px;
  justify-content: space-between;
}

.emptyLine {
  width: 100%;
  height: 80px;
  background-color: white;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  margin-left: -15px;
  font-size: 14px;
  color: #b3b3b3;
}
</style>
